/* 工具卡片样式 */
.tool-card {
  background-color: var(--bg-card);
  border-radius: 16px;
  box-shadow: 0 4px 6px -1px var(--shadow-light), 0 2px 4px -1px var(--shadow-light);
  transition: all 0.3s ease;
}

/* 暗黑模式下的工具卡片样式 */
html.dark .tool-card {
  background-color: var(--bg-secondary);
  box-shadow: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -1px var(--shadow-color);
}

/* 工具卡片标题样式 */
.tool-card h3 {
  color: var(--text-color);
}

html.dark .tool-card h3 {
  color: var(--text-color);
}

/* 工具卡片描述文字样式 */
.tool-card p {
  color: var(--text-secondary);
}

html.dark .tool-card p {
  color: var(--text-secondary);
}

/* 浏览量文字样式 */
.tool-card .text-gray-400 {
  color: var(--text-light);
}

html.dark .tool-card .text-gray-400 {
  color: var(--text-light);
}

/* 标签样式 */
.tool-card span {
  transition: all 0.2s ease;
}

/* 暗黑模式下的标签样式 */
html.dark .tool-card {
  .bg-indigo-100 { background-color: rgba(55, 48, 163, 0.3) !important; }
  .text-indigo-600 { color: #a5b4fc !important; }
  
  .bg-purple-100 { background-color: rgba(91, 33, 182, 0.3) !important; }
  .text-purple-600 { color: #c4b5fd !important; }
  
  .bg-pink-100 { background-color: rgba(184, 37, 129, 0.3) !important; }
  .text-pink-600 { color: #f9a8d4 !important; }
  
  .bg-rose-100 { background-color: rgba(190, 18, 60, 0.3) !important; }
  .text-rose-600 { color: #fda4af !important; }
  
  .bg-blue-100 { background-color: rgba(30, 64, 175, 0.3) !important; }
  .text-blue-600 { color: #93c5fd !important; }
  
  .bg-cyan-100 { background-color: rgba(8, 145, 178, 0.3) !important; }
  .text-cyan-600 { color: #67e8f9 !important; }
  
  .bg-teal-100 { background-color: rgba(13, 148, 136, 0.3) !important; }
  .text-teal-600 { color: #5eead4 !important; }
  
  .bg-green-100 { background-color: rgba(21, 128, 61, 0.3) !important; }
  .text-green-600 { color: #86efac !important; }
  
  .bg-emerald-100 { background-color: rgba(5, 150, 105, 0.3) !important; }
  .text-emerald-600 { color: #6ee7b7 !important; }
  
  .bg-yellow-100 { background-color: rgba(161, 98, 7, 0.3) !important; }
  .text-yellow-600 { color: #fde047 !important; }
  
  .bg-orange-100 { background-color: rgba(194, 65, 12, 0.3) !important; }
  .text-orange-600 { color: #fed7aa !important; }
  
  .bg-red-100 { background-color: rgba(185, 28, 28, 0.3) !important; }
  .text-red-600 { color: #fca5a5 !important; }
  
  .bg-slate-100 { background-color: rgba(51, 65, 85, 0.3) !important; }
  .text-slate-600 { color: #cbd5e1 !important; }
  
  .bg-gray-100 { background-color: rgba(55, 65, 81, 0.3) !important; }
  .text-gray-600 { color: #d1d5db !important; }
  
  .bg-zinc-100 { background-color: rgba(63, 63, 70, 0.3) !important; }
  .text-zinc-600 { color: #d4d4d8 !important; }
}

/* 图片样式 */
.tool-card {
  .lazy-image {
    width: 45px;
    height: 45px;
    object-fit: cover;
    border-radius: 50%;
    transition: all 0.3s ease;
    animation: gradient-x 3s ease infinite;
  }
}

/* 暗黑模式下的渐变动画 */
@keyframes gradient-x-dark {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

html.dark .tool-card {
  .lazy-image {
    animation: gradient-x-dark 3s ease infinite;
  }
}

/* 渐变动画 */
@keyframes gradient-x {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* 移动端响应式样式 */
@media (max-width: 768px) {
  .tool-card {
    .lazy-image {
      width: 40px;
      height: 40px;
    }
  }
}

@media (max-width: 480px) {
  .tool-card {
    .lazy-image {
      width: 35px;
      height: 35px;
    }
  }
}